<template>
  <el-dialog title="题目预览" :visible="isShow" :before-close="handleClose">
    <el-row style="margin-top: 20px; margin-bottom: 15px">
      <el-col :span="6"
        >【题型】：{{ getQuestionType(details.questionType) }}</el-col
      >
      <el-col :span="6">【编号】：{{ details.id }}</el-col>
      <el-col :span="6"
        >【难度】：{{ getDifficulty(details.difficulty) }}</el-col
      >
      <el-col :span="6">【标签】：{{ details.tags }}</el-col>
    </el-row>
    <el-row style="margin-top: 20px; margin-bottom: 15px">
      <el-col :span="6">【学科】：{{ details.subjectName }}</el-col>
      <el-col :span="6">【目录】：{{ details.directoryName }}</el-col>
      <el-col :span="6">【方向】：{{ details.direction }}</el-col>
      <el-col :span="6"></el-col>
    </el-row>
    <hr />
    <el-row style="margin-top: 10px">
      <el-col>【题干】：</el-col>
    </el-row>
    <el-row>
      <el-col v-html="details.question" style="color: blue"></el-col>
    </el-row>
    <el-row>
      <el-col
        >{{ getQuestionType(details.questionType) }}题
        选项：（以下选中的选项为正确答案）</el-col
      >
    </el-row>
    <el-row style="margin-top: 10px; margin-bottom: 15px">
      <el-row
        style="margin-top: 10px"
        v-for="(item, index) in details.options"
        :key="index"
      >
        <el-radio :value="item.code" :label="item.isRight ? item.code : -1">{{
          item.title
        }}</el-radio>
      </el-row>
    </el-row>
    <hr />
    <el-row>
      <el-col
        >【参考答案】：<el-button type="danger" @click="openVideo">视频答案预览</el-button></el-col
      >
    </el-row>
    <video :src="details.videoURL" controls="controls" class="analysis" v-if="videoShow">
      your browser does not support the video tag
    </video>
    <hr />
    <el-row>
      【答案解析】： <span v-html="details.answer" style="display: inline-block"></span>
    </el-row>
    <hr />
    <el-row >
      <el-col>【题目备注】：{{details.remarks}}</el-col>
    </el-row>
    <span slot="footer" class="dialog-footer">
      <el-row type="flex" justify="end">
        <el-button @click="handleClose">关闭</el-button>
      </el-row>
    </span>
  </el-dialog>
</template>

<script>

export default {
  props: {
    isShow: {
      type: Boolean,
      required: true
    },
    details: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      videoShow: false
    }
  },
  computed: {
    getQuestionType () {
      return (value) => {
        value = value * 1
        if (value === 1) {
          return '单选'
        } else if (value === 2) {
          return '多选'
        } else {
          return '简答'
        }
      }
    },
    getDifficulty () {
      return (value) => {
        value = value * 1
        if (value === 1) {
          return '简单'
        } else if (value === 2) {
          return '一般'
        } else {
          return '困难'
        }
      }
    }
  },
  methods: {
    openVideo () {
      if (this.details.videoURL) {
        this.videoShow = true
      }
    },
    handleClose () {
      this.$emit('update:isShow', false)
    }
  }
}
</script>

<style scoped >
.analysis {
  width: 400px;
  height: 300px;
}
</style>
